<template>
    <div class="ml-16px mr-16px pl-26px pt-26px pr-26px content-container">
        <div class="text-22px font-bold">{{ state.companyName }}</div>
        <div class="flex items-center mt-20px">
            <p class="text-14px font-bold">网址</p>
            <div class="w-400px ml-12px">
                <el-select v-model="state.websiteUrl" @change="handleSelect">
                    <el-option v-for="item in state.websiteUrls" :label="item.url" :value="item.url"></el-option>
                </el-select>
            </div>
        </div>
        <div class="flex items-center mt-20px friendly-tips">
            <svg-icon size="18px"
                icon-class="information-2-fill"></svg-icon>搜索引擎关键词排名随时都会有浮动变化，实时查询是排名时排名结果可能会和报表结果有所出入，特此说明
        </div>
        <div class="search-list">
            <ul>
                <li class="total">
                    <div class="flex justify-between items-center">
                        <div class="flex flex-col">
                            <span>{{ state.ranking }}</span>
                            <p>排名总数</p>
                        </div>
                        <div class="flex items-center">
                            趋势 <svg-icon size="16px" icon-class="arrow-right-s-line"></svg-icon>
                        </div>
                    </div>
                </li>
                <li v-for="(item, index) in state.searchData" :key="index">
                    <div class="flex justify-between items-center" :class="item.from">
                        <div class="flex items-center">
                            <div class="flex flex-center icon"><i></i></div>
                            <p>{{ item.name }}</p>
                        </div>
                        <div class="number">
                            <span>{{ item.number }}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="flex justify-between relative">
            <Tabs v-model="activeIndex" @update:model-value="handleTabClick" active-color="#ffffff">
                <TabItem label="首页" path="" :index="0">
                    <SearchEngines ref="searchEnginesRef" :tableData="state.tableData"
                        :searchEngines="state.searchEngines" :page="state.page" @update:data="handleUpdateData" />
                </TabItem>
                <TabItem label="二三页" path="" :index="1">
                    <SearchEngines ref="searchEnginesRef" :tableData="state.tableData"
                        :searchEngines="state.searchEngines" :page="state.page" @update:data="handleUpdateData" />
                </TabItem>
            </Tabs>
            <div class="flex items-center absolute left-160px h-32px text-14px">
                首次上线关键词总数 <el-text type="primary" class="font-bold !pl-5px !pr-5px">{{ state.homeLength }}</el-text> 个，二三页上线关键词总数 <el-text
                    type="primary" class="font-bold !pl-5px !pr-5px">{{ state.otherLength }}</el-text> 个
            </div>
            <div class="flex items-center absolute right-0px">
                <div class="text-14px mr-15px">报表生成时间：{{ formatDate(state.time) }} </div>
                <el-button type="primary" @click="handleExport"><svg-icon size="18px" icon-class="export-line"
                        class="mr-4px"></svg-icon>导出报表</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Tabs from '@/components/Tab/First.vue'
import TabItem from '@/components/Tab/Item.vue'
import SearchEngines from './components/SearchEngines.vue'
import { getKeywordRankApi,exportKeywordRankApi } from '@/api/sem'
import { ISearchData } from '@/api/b2b/type'
import { ISite } from '@/api/sem/types'
import { dateFormat } from '@/utils/date'

const state = reactive({
    searchData: <ISearchData[]>[],
    tableData: [],
    websiteUrls: <ISite[]>[],
    websiteUrl: '',
    searchEngines: [],
    time: '',
    homeLength: 0,
    otherLength: 0,
    page: {
        total: 0,
        curPage: 1,
        limit: 10,
        pageSizes: 10,
        type: 1
    },
    engine: '',
    order: '',
    companyName: '',
    ranking: 0
})

const activeIndex = ref(0)

const searchEnginesRef = ref()

const formatDate = computed(() => {
    return function (data: string) {
        return dateFormat(data, 'YYYY-MM-DD')
    }
})

function handleTabClick(val: any) {
    //每次切换的时候重置分页，重新获取数据
    const { index } = val
    activeIndex.value = index
    state.page.type = index + 1
    state.page.curPage = 1
    state.page.pageSizes = 10
    state.page.total = 0
    state.page.limit = 10
    state.engine = ''
    searchEnginesRef.value?.resetSearchEngine()
    getKeywordRank()
}

async function handleExport() {
    const res = await exportKeywordRankApi({
        url:state.websiteUrl,
        submit: state.engine,
    })
    if(res.code === 200){
        const downloadLink = document.createElement('a');
        downloadLink.href = res.data;
        downloadLink.download = `${res.dataname}.xlsx`;
        downloadLink.click();
        downloadLink.remove()
    }
}

function handleUpdateData(value: any) {
    state.page.type = value.tk
    state.engine = value.source
    state.order = value.order
    state.page.curPage = value.curPage
    state.page.pageSizes = value.pageSizes
    state.page.limit = value.limit
    state.page.type = value.type
    getKeywordRank()
}

function handleSelect() {
    getKeywordRank()
}


async function getKeywordRank() {
    const res: ResType = await getKeywordRankApi({
        tk: state.page.type,
        source: state.engine,
        order: state.order,
        pn: state.page.curPage,
        pagesize: state.page.limit,
        url:state.websiteUrl,
    })
    if (res.code === 200) {
        state.tableData = res.data
        state.searchData = res.searchdata
        state.searchEngines = res.sourcelist
        state.time = res.datetime
        state.homeLength = res.homecount
        state.otherLength = res.ncount
        state.page.total = res.count
        state.page.curPage = res.page as number
        state.page.pageSizes = res.total
        state.companyName = res.companyname
        state.websiteUrls = res.urllist
        state.ranking = res.pmCount
    }
}

onMounted(() => {
    getKeywordRank()
})
</script>

<style lang="scss" scoped>

</style>